<template>
  <div>
    <div class="page_header">
      <div>
        <a-select v-model="searchStatus" style="width: 220px">
          <a-select-option value="0">全部</a-select-option>  
          <a-select-option value="1">待审核</a-select-option>
          <a-select-option value="2">提现成功</a-select-option>
          <a-select-option value="3">提现失败</a-select-option>
        </a-select>
        <a-input
        placeholder="请输入用户账号"
        v-model="searchText"
        style="width:220px;"
        />
        <a-button type="primary" @click="onSearch" :loading="searchLoading">搜索</a-button>  
      </div>
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="out_id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="status"  slot-scope="text,record"> 
           <span :class="{ redColor: record.status=='提现失败', greenColor: record.status=='提现通过' }">{{record.status}}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import { outList } from '@/api/getData'
export default {
  name: 'AmountOutList',
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'sort_id'
            },
            {
            title: '用户昵称',
            dataIndex: 'nickname'
            },
            {
            title: '用户账号',
            dataIndex: 'phone'
            },
            {
            title: '提现账号',
            dataIndex: 'out_user'
            },
            {
            title: '提现姓名',
            dataIndex: 'out_name'
            },
            {
            title: '提现金额',
            dataIndex: 'num'
            },
            {
            title: '创建时间',
            dataIndex: 'create_time'
            },
            {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
            },
            {
            title: '备注',
            dataIndex: 'out_note'
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: '',
        searchStatus: '0'
    }
  },
  mounted () {
    
    this.queryTaskList()
  },
  methods: {
    checkDetail(record){
        console.log(record)
        sessionStorage.setItem("taskItem",JSON.stringify(record));
        this.$router.push({path: '/taskadmin/taskDetail'})
    },  
    queryTaskList(){
        this.tableLoding = true
        outList(this.pagination.current,this.pagination.pageSize,this.searchText,this.searchStatus).then(res=>{
            console.log(res)
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
            this.searchText = ''
            this.searchStatus = '0'
        })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.queryTaskList()
    },
    setSearchStatus(value){
      this.searchStatus = value
    }
  }
}
</script>

<style scoped>
.page_header{
    margin-bottom:20px; 
    display:flex;
}
</style>
